<template>
  <Panel :title="boundaryTitle" class="flow-boundary" v-bind="props.config">
    <!-- 出入省总统计 -->
    <div class="boundary-total">
      <div class="in-province-total">
        <svg-icon icon-class="in-province" class="boundary-car"></svg-icon>
        <div>
          <div>入省总计</div>
          <div>
            <span class="number">{{ inProvinceTotal }}</span>
            <span>辆</span>
          </div>
        </div>
      </div>
      <div class="out-province-total">
        <svg-icon icon-class="out-province" class="boundary-car"></svg-icon>
        <div>
          <div>出省总计</div>
          <div>
            <span class="number">{{ outProvinceTotal }}</span>
            <span>辆</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 省界、市界详细统计 -->
    <div class="province-statistical scroll-hover">
      <div v-for="(item, index) in provinceList" :key="item.id" class="city-border">
        <span class="city-border-name" :class="active == index ? 'active' : ''" @click="provinceClick(item, index)">{{
          item.provincialName
        }}</span>
        <div class="statistical-detail">
          <div class="province-detail">
            <span class="go-out">出</span>
            <span class="number">{{ item.exit }}</span>
            <span class="unit">辆</span>
          </div>
          <div class="province-detail">
            <span class="come-in">入</span>
            <span class="number">{{ item.entrance }}</span>
            <span class="unit">辆</span>
          </div>
        </div>
      </div>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'FlowBoundary'
}
</script>
<script setup>
/**
 * @desc 省界通道/市界通道(二级)
 * @auther 阳坤
 * @date 2022/10/22
 *
 **/

import Panel from '../../components/panel'
import flowApi from '../../api/flow.js'
import store from '@/store'
import useWatchStore from '@/hooks/useWatchStore'
import { ref, defineProps, onMounted, computed, defineEmits, reactive } from 'vue'

const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

// 获取vuex的值 变成响应式
const isProvince = computed(() => store.state.config.isProvince)

// 标题title
const boundaryTitle = isProvince.value ? '省界通道' : '市界通道'
// 入省总计
const inProvinceTotal = ref()
// 出省总计
const outProvinceTotal = ref()
// 省界、市界列表
const provinceList = ref([])
const active = ref()

// emit回调方法
const emit = defineEmits(['setDetail'])

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: isProvince.value ? argParams.areaCode : ''
  }
  if (isProvince.value) {
    flowApi
      .getProvincialChannelStatistic(params)
      .then(res => {
        if (res.data) {
          inProvinceTotal.value = res.data.intoProvincialTotal
          outProvinceTotal.value = res.data.outProvincialTotal
          provinceList.value = res.data.provincialFlowInfoResponses
        }
      })
      .catch(() => {})
  } else {
    flowApi
      .getBoundaryChannelStatistic(params)
      .then(res => {
        if (res.data) {
          inProvinceTotal.value = res.data.intoProvincialTotal
          outProvinceTotal.value = res.data.outProvincialTotal
          provinceList.value = res.data.provincialFlowInfoResponses
        }
      })
      .catch(() => {})
  }
}

/**
 * 省界点击
 */
const provinceClick = (data, index) => {
  active.value = index
  console.log('click:', data)
  emit('setDetail', {
    type: 'flow-boundary',
    actions: 'click',
    data,
    config: props.config.detailConfig
  })
}

/**
 * 初始化以及监听地市编码跟路网类型
 */
useWatchStore(getData)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow-boundary {
  height: 100%;
  display: flex;
  flex-direction: column;

  /deep/.mz-panel-content-main {
    overflow: hidden;
    padding: 10px 20px;
  }

  .boundary-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;

    .in-province-total,
    .out-province-total {
      width: 49%;
      display: flex;
      align-items: center;
      font-size: 14px;

      .boundary-car {
        width: 42px;
        height: 42px;
        margin-right: 8px;
      }
    }

    .in-province-total {
      .number {
        color: @primary-color;
        line-height: 20px;
        font-size: 26px;
        vertical-align: text-bottom;
      }
    }

    .out-province-total {
      .number {
        color: #28c073;
        line-height: 20px;
        font-size: 26px;
        vertical-align: text-bottom;
      }
    }
  }

  .province-statistical {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;

    .city-border {
      width: 49%;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      margin-bottom: 10px;

      .city-border-name {
        cursor: pointer;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 15px;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0);
        border: 1px solid @primary-color;
        border-radius: 6px;
        padding: 2px;
        display: flex;
        box-shadow: inset 0 0 5px @primary-color;
        color: @primary-color;
        margin-right: 10px;

        &.active {
          background: #266bf4;
          color: #fff;
        }
      }

      .statistical-detail {
        flex: 1;
      }
    }
  }

  .go-out,
  .come-in {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }

  .go-out {
    border: 1px solid #28c073;
    color: #2fc576;
  }

  .come-in {
    border: 1px solid @primary-color;
    color: @primary-color;
  }

  .province-detail {
    display: flex;
    align-items: center;

    .number {
      height: 100%;
      font-size: 20px;
      line-height: 15px;
      margin: 0 5px;
      padding-top: 3px;
    }
  }

  .unit {
    font-size: 14px;
  }
}
</style>
